<template>
  <view class="page">
    <image
      :lazy-load="true"
      class="bg"
      :src="imgBaseUrlV0 + 'maintenance-record-add-bg.png'"
      mode="widthFix"
    ></image>

    <view class="main">
      <view class="title">
        <text class="chn"
          >{{ equipment === null ? "" : equipment.name }}维护记录</text
        >
        <text class="en">Add maintenance record</text>
      </view>

      <form :model="dataForm" ref="form" class="form">
        <view class="maintenance-record-add-view">
          <view class="field-view">
            <view class="field">
              <view class="field-value">
                <picker
                  class="select-show"
                  mode="date"
                  :class="[dataForm.check_date ? '' : 'placeholder']"
                  @change="confirmDate"
                  >{{ currentCheckTimeLabel }}</picker
                >
              </view>
            </view>
          </view>
          <view class="field-view">
            <view class="field">
              <view class="field-value">
                <picker
                  v-model="dataForm.is_warning"
                  class="select-show"
                  :class="[
                    dataForm.is_warning == undefined ? 'placeholder' : '',
                  ]"
                  :range="statusOptions"
                  range-key="label"
                  @change="exceptionSelectConfirm"
                >
                  {{ currentStatus }}
                </picker>
                <!-- <u-form-item prop="is_warning"></u-form-item> -->
              </view>
            </view>
          </view>
          <view class="field-view">
            <view class="field">
              <view class="field-value">
                <view class="desc">
                  <textarea
                    class="text-input textarea"
                    type="textarea"
                    v-model="dataForm.desc"
                    placeholder="描述"
                  />
                </view>
              </view>
            </view>
          </view>
          <view class="view">
            附件
            <Upload
              :imgList="dataForm.img"
              @uploadSuccess="onUpload"
              @deleteImg="onDelete"
              :uploadWidth="190"
              :uploadHeight="190"
              :imgCount="3"
              :line="3"
            ></Upload>
          </view>
        </view>
        <view class="submit-btn" @click="submit">提交</view>
      </form>
    </view>

    <Message ref="message"></Message>
  </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import { postMaintenanceRecord } from "@/common/api/maintenance-record.js";
import Upload from "@/components/public/upload";
import { imgBaseUrl, imgBaseUrlV0 } from "@/common/config/index";
export default {
  mixins: [detailModule],
  components: {
    Upload,
  },
  data() {
    return {
      equipment: null,
      imgBaseUrlV0,
      dataForm: {
        device_id: undefined,
        is_warning: undefined,
        desc: "",
        check_date: "",
        img: [],
      },
      params: {
        year: true,
        month: true,
        day: true,
        hour: false,
        minute: false,
        second: false,
      },
      showSelectDate: false,
      currentCheckTimeLabel: "检查日期",
      statusOptions: [
        {
          label: "正常",
          value: 0,
        },
        {
          label: "异常",
          value: 1,
        },
      ],
      isShowSelectStatus: false,
      currentStatus: "有无异常",
      rules: {
        // check_date: [
        // 	{
        // 		required: true,
        // 		type: 'date',
        // 		message: '检查日期不能为空！',
        // 		trigger: ['change'],
        // 	}
        // ],
        // is_warning: [
        // 	{
        // 		required: true,
        // 		type: 'boolean',
        // 		message: '异常状态不能为空！',
        // 		trigger: ['change'],
        // 	}
        // ],
      },
    };
  },
  // 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
  onReady() {
    // this.$refs.form.setRules(this.rules);
  },
  onLoad(e) {
    if (e.name) {
      uni.setNavigationBarTitle({
        title: "添加记录 - " + e.name,
      });
    }
    if (e.equipmentId) {
      this.dataForm.device_id = e.equipmentId;
    }
  },
  methods: {
    confirmDate(e) {
      let value = e.detail.value;
      this.currentCheckTimeLabel = value;
      this.dataForm.check_date = value;
    },
    exceptionSelectConfirm(e) {
      let value = e.detail.value;
      let item = this.statusOptions[value];
      this.currentStatus = item.label;
      this.dataForm.is_warning = item.value;
    },
    // 查看图片
    previewImage(imageSrcs) {
      uni.previewImage({
        current: 0,
        urls: imageSrcs,
      });
    },
    onUpload(item) {
      this.dataForm.img.push(item.url);
    },
    onDelete(index) {
      this.dataForm.img.splice(index, 1);
    },
    submit() {
      // this.$refs.form.validate(async valid => {
      // 	if (valid) {
      let isValid = false;
      let message = "校验有误！";

      do {
        if (this.dataForm.check_date === null) {
          message = "检查日期不能为空！";
          break;
        }
        if (this.dataForm.is_warning === undefined) {
          message = "异常状态不能为空！";
          break;
        }

        isValid = true;
      } while (false);

      if (isValid) {
        uni.showLoading({
          title: "提交中",
          mask: false,
        });

        postMaintenanceRecord(this.dataForm)
          .then((res) => {
            uni.hideLoading();
            if (res.code !== this.$ERR_OK) {
              return this.message.error(res.message || "提交失败");
            }
            this.showModal({
              title: "提示",
              content: "提交成功,点击返回上一页",
              showCancel: false,
              success: (r) => this.$Router.go(-1),
            });
          })
          .catch(() => {
            uni.hideLoading();
          });
      } else {
        this.message.error(message);
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.page {
  min-height: calc(100vh - var(--window-top));
  background-color: #3f7dff;

  position: relative;
}

.bg {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
}

.main {
  position: relative;
  z-index: 2;
  padding-bottom: 30rpx;

  .title {
    padding: 110rpx 0;
    text-align: center;

    .chn {
      display: block;
      font-size: 32rpx;
      font-weight: 700;
      line-height: 70rpx;
      color: #fff;
    }
    .en {
      display: block;
      font-size: 22rpx;
      line-height: 30rpx;
      color: #889dbf;
    }
  }

  .form {
    .maintenance-record-add-view {
      background-color: #fff;
      padding: 40rpx;
      margin: 30rpx;
      border-radius: 10rpx;

      .field-view {
        display: flex;
        flex-direction: row;
        margin-bottom: 20rpx;

        .field {
          padding-top: 10rpx;
          flex: 1;

          &:nth-child(2) {
            margin-left: 90rpx;
          }
          .field-title {
            font-size: 26rpx;
            color: #838383;
          }
          .field-value {
            border: 3rpx solid #eeeeee;
            color: #434343;
            display: flex;
            flex-direction: row;

            &.inline-block {
              display: inline-block;
            }
            .text-input {
              flex: 1;
            }
            .select-show {
              flex: 1;
              line-height: 80rpx;
              font-size: 28rpx !important;
              padding: 0 20rpx !important;
            }
            .placeholder {
              color: #838383;
            }
            .icon {
              margin-right: 14rpx;
            }
            .desc {
              height: 200rpx;
            }
          }
          .field-value-attachment {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            .add-attachment-view {
              text-align: center;

              .add-attachment {
                width: 100rpx;
                height: 100rpx !important;
                border: 3rpx solid #eeeeee;
                padding: 42rpx;
                margin-right: 10rpx;
                background-color: #f6f6f6;
              }
              .field-title2 {
                font-size: 24rpx;
                color: #939393;
                margin-top: 15rpx;
                padding-bottom: 30rpx;
              }
            }
            .image-view {
              margin-left: 5rpx;
              text-align: center;

              .attachment {
                width: 188rpx;
                height: 188rpx;
                margin-right: 10rpx;
              }
              .delete-text {
                font-size: 24rpx;
                color: #d44;
                margin-top: 15rpx;
                padding-bottom: 30rpx;
              }
            }
          }
        }
      }
    }
    .submit-btn {
      margin: 40rpx 30rpx;
      margin-bottom: 0;
      text-align: center;
      background-color: #5096ff;
      color: #fff;
      line-height: 100rpx;
      font-weight: 700;
      font-size: 32rpx;
      border-radius: 10rpx;
    }
  }
}

.textarea {
  height: 200rpx;
  line-height: 1.4;
  padding: 12rpx 8rpx;
}
</style>